:root {
  /* --nsl-header is overridden by PHP (wp_head) with the admin-chosen colour.
     This fallback makes all the color-mix() expressions valid even when the
     PHP injection hasn't run yet, which prevents transparent / invisible panels. */
  --nsl-header:     #0ea5a4;
  --nsl-headerText: #ffffff;
  --nsl-line:       #e6f4f4;
  --nsl-detailBg:   color-mix(in oklab, var(--nsl-header)  8%, #ffffff 92%);
  --nsl-pillBg:     color-mix(in oklab, var(--nsl-header) 12%, #ffffff 88%);
  --nsl-pillBorder: color-mix(in oklab, var(--nsl-header) 24%, #ffffff 76%);
}

/* ── Header styling ── */
table.nsl-table thead th {
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--nsl-header) 92%, #000 0%),
    color-mix(in oklab, var(--nsl-header) 75%, #000 0%)
  ) !important;
  color: var(--nsl-headerText) !important;
  border-bottom: 1px solid color-mix(in oklab, var(--nsl-header) 70%, #000 10%) !important;
}

/* ── Row hover ── */
table.nsl-table tbody tr { cursor: pointer; }
table.nsl-table tbody tr:hover td {
  background: color-mix(in oklab, var(--nsl-header) 6%, #fff 94%);
}

/* ── Detail panel ── */
.nsl-detail {
  display: none;
  padding: 12px 14px 14px;
  background: var(--nsl-detailBg);
  box-sizing: border-box;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.nsl-detail.nsl-open { display: block; }

.nsl-detail-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--nsl-pillBg);
  border: 1px solid var(--nsl-pillBorder);
  margin-bottom: 8px;
}
.nsl-detail-text {
  font-size: 13px;
  line-height: 1.35;
}

/* ── Updates banner ── */
.nsl-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 999999;
  background: #111827;
  color: white;
  border-radius: 999px;
  padding: 10px 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
  max-width: calc(100vw - 24px);
}
.nsl-banner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.nsl-banner-btn {
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  font-weight: 700;
}

/* ── Filter bar ──────────────────────────────────────────────────────────────
   Inserted above the DataTables wrapper by JS (buildFilterBar).
   Groups: one for Tier buttons, one for toggle filters.
   Active state uses --nsl-header so it matches the table header colour.
── */
.nsl-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  padding: 10px 4px 12px;
  width: 100%;
  box-sizing: border-box;
}

.nsl-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.nsl-filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
  margin-right: 2px;
  white-space: nowrap;
}

.nsl-filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--nsl-header) 35%, #ffffff 65%);
  background: #ffffff;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms, box-shadow 120ms;
  white-space: nowrap;
  line-height: 1;
}

.nsl-filter-btn:hover {
  background: color-mix(in oklab, var(--nsl-header) 10%, #ffffff 90%);
  border-color: color-mix(in oklab, var(--nsl-header) 60%, #ffffff 40%);
  color: color-mix(in oklab, var(--nsl-header) 80%, #000 20%);
}

.nsl-filter-btn.nsl-active {
  background: var(--nsl-header);
  border-color: var(--nsl-header);
  color: var(--nsl-headerText);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--nsl-header) 40%, transparent 60%);
}

.nsl-filter-btn.nsl-active:hover {
  background: color-mix(in oklab, var(--nsl-header) 85%, #000 15%);
  border-color: color-mix(in oklab, var(--nsl-header) 85%, #000 15%);
  color: var(--nsl-headerText);
}

/* Separator between groups */
.nsl-filter-group + .nsl-filter-group {
  padding-left: 16px;
  border-left: 1px solid #e5e7eb;
}

/* ── Generic managed-table wrapper ───────────────────────────────────────────
   JS adds .nsl-managed-wrapper to every #tablepress-{id}_wrapper it controls.
   width: 100% (not fit-content) — DataTables stamps an inline pixel width on
   the <table> after every redraw; fit-content creates a circular dependency
   that breaks centering. 100% fills the content column reliably.
── */
.nsl-managed-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
}

/* DataTables inserts .dataTables_wrapper between our wrapper and the table. */
.nsl-managed-wrapper .dataTables_wrapper {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* !important overrides the inline width DataTables stamps after each redraw. */
.nsl-managed-wrapper table.nsl-table {
  display: table !important;
  width: 100% !important;
  table-layout: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

.nsl-managed-wrapper table.nsl-table thead th,
.nsl-managed-wrapper table.nsl-table tbody td {
  text-align: center !important;
}

/* ── Overlay container ── */
#nsl-desc-overlay {
  position: fixed;
  z-index: 999999;
  display: none;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 0;
  contain: layout paint;
}

#nsl-desc-overlay .nsl-detail {
  display: block !important;
  background: #f0fafa; /* fallback for browsers without color-mix support */
  background: var(--nsl-detailBg);
  padding: 12px 14px 14px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}